<template>
	<div class="edit-info-page full box relative bg-white flex-col">
		<div class="user-avatar-wrap">
			<image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" @click="handleChooseImage" />
			<span class="tip-text">点击更换头像</span>
		</div>
		<div class="form-item">
			<span class="form-label">昵称</span>
			<input class="form-input" placeholder="请输入昵称" type="text" maxlength="20" v-model="userInfo.nickname" />
			<image mode="aspectFill" src="/static/images/chevron-right.png" />
		</div>
		<div class="footer-wrap p-safe">
			<u-button shape="circle" type="primary" @click="handleSave">保存</u-button>
		</div>
	</div>
</template>
<script>
	import { center as getuserInfo } from '@/utils/index.js'
	import { showLoading, toast, request, uploadFile } from '@/utils/tool'
	export default {
		data() {
			return {
				userInfo: {
					nickname: "",
					avatar: "",
					account: ""
				}
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			handleChooseImage() {
				uni.chooseImage({
					count: 1,
					crop: {
						width: 80,
						height: 80,
					},
					success: async res => {
						const files = res.tempFilePaths || []
						if (!files.length) return
						const [file] = files
						const [error, uploadResp] = await uploadFile(file)
						if (error) return
						this.userInfo.avatar = uploadResp.uri
					}
				})
			},
			async initData() {
				const token = uni.getStorageSync('token')
				if (!token) return
				const hide = showLoading("正在获取")
				const resp = await getuserInfo().catch(hide)
				hide()
				const userInfo = resp.data
				if (!userInfo) return
				this.userInfo = userInfo
			},
			async handleSave() {
				const { nickname, account, avatar } = this.userInfo
				if (!nickname) return toast({ title: "请输入昵称", icon: "error" })
				const hide = showLoading("正在修改")
				const resp = await request({
					url: "/user/setpiliangInfo",
					method: "POST",
					data: {
						avatar,
						mobile: account,
						nickname
					}
				}).finally(hide)
				if (resp.code !== 1) return toast({ title: "修改失败", icon: "error" })
				toast({ title: "修改成功", icon: "success" }, () => {
					uni.navigateBack()
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.edit-info-page {
		.footer-wrap {
			padding: 0 64rpx;
			margin: auto 0 20rpx;
		}

		.form-item {
			margin: 18rpx 32rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 26rpx 32rpx;
			border-bottom: 2rpx solid #E7E7E7;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 20rpx;
			}

			.form-label {
				font-weight: 400;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 44rpx;
				margin-right: 32rpx;
			}

			.form-input {
				flex: 1;
				height: 44rpx;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 44rpx;
			}
		}

		.user-avatar-wrap {
			padding: 88rpx 0 0;
			box-sizing: border-box;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;

			.user-avatar {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
				overflow: hidden;
				background: #f1f1f1;
			}

			.tip-text {
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3361F0;
				line-height: 48rpx;
			}
		}
	}
</style>